<template>
  <div>
    <loginHeader @tabClick="tabClick"></loginHeader>
    <transition name="el-fade-in-linear">
      <component :is="componentName"></component>
    </transition>
    <portalBottom></portalBottom>
  </div>

</template>

<script>
  import caseProduct from '@/views/portal/components/caseProduct'
  import product from '@/views/portal/components/product'
  import portalBottom from './components/bottom'
  import loginHeader from './components/header'
  import cooperation from './components/cooperation'
  import recruit from '@/views/portal/components/recruit'
  import contact from './components/contact'
  import loginIndex from './components/index'
  import loginMedia from './components/media'
  import loginIntroduction from './components/introduction'
  import loginMakePrice from './components/makePrice'
  import introduction from '@/views/portal/components/introduction'
  import utils from '../../utils/utils.js'
  export default {
    name: 'index',
    data(){
      return{
        componentName: 'loginIndex'
      }
    },
    components: {loginHeader,loginIndex,loginMedia,loginIntroduction,portalBottom,cooperation,contact,recruit,loginMakePrice,product,introduction,caseProduct},
    mounted() {
    },
    methods:{
      tabClick(data){
        console.log(data)
        if (data == 'index'){
          this.componentName = 'loginIndex'
        } else if (data == 'service') {
          this.componentName = 'product'
        } else if (data == 'pricing') {
          this.componentName = 'loginMakePrice'
        } else if (data == 'case') {
          this.componentName='caseProduct'
        } else if (data == 'cooperation') {
          this.componentName = 'cooperation'
        } else if (data == 'introduction'){
          this.componentName = 'loginIntroduction'
        } else if (data == 'recruit'){
          this.componentName = 'recruit'
        } else if (data == 'contact'){
          this.componentName = 'contact'
        }else if (data == 'media'){
          this.componentName = 'loginMedia'
        }
      }
    }
  }
</script>

<style scoped>

</style>
